class Loading extends HTMLElement {
    constructor() {
        super();

        const template = document.createElement("template");

        template.innerHTML = `
            <style>
                :host {
                    display: inline-flex;
                    font-size: 16px;
                    align-items: center;
                }
                #cp-loading {
                    width: 1em;
                    height: 1em;
                    vertical-align: -0.15em;
                    fill: currentColor;
                    overflow: hidden;
                    animation: rotate 1.4s linear infinite;
                }
                @keyframes rotate{
                    to{
                        transform: rotate(360deg); 
                    }
                }
            </style>
            <svg view="0 0 1024 1024" class="cp-icon" xmlns="http://www.w3.org/2000/svg" version="1.1" aria-hidden="true" id="cp-loading">
                <svg aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;">
                    <symbol id="cp-icon-loading" viewBox="0 0 1024 1024">
                        <path
                            d="M512 64q14.016 0 23.008 8.992T544 96v192q0 14.016-8.992 23.008T512 320t-23.008-8.992T480 288V96q0-14.016 8.992-23.008T512 64z m0 640q14.016 0 23.008 8.992T544 736v192q0 14.016-8.992 23.008T512 960t-23.008-8.992T480 928v-192q0-14.016 8.992-23.008T512 704z m448-192q0 14.016-8.992 23.008T928 544h-192q-14.016 0-23.008-8.992T704 512t8.992-23.008T736 480h192q14.016 0 23.008 8.992T960 512z m-640 0q0 14.016-8.992 23.008T288 544H96q-14.016 0-23.008-8.992T64 512t8.992-23.008T96 480h192q14.016 0 23.008 8.992T320 512zM195.008 195.008q10.016-8.992 23.008-8.992t22.016 8.992l136 136q8.992 10.016 8.992 22.496t-9.504 22.016-22.016 9.504-22.496-8.992l-136-136q-8.992-8.992-8.992-22.016t8.992-23.008zM648 648q10.016-10.016 22.496-10.016t22.496 10.016l136 136q8.992 8.992 8.992 22.016t-9.504 22.496-22.496 9.504-22.016-8.992l-136-136q-10.016-10.016-10.016-22.496t10.016-22.496z m180.992-452.992q8.992 10.016 8.992 23.008t-8.992 22.016l-136 136q-10.016 8.992-22.496 8.992t-22.016-9.504-9.504-22.016 8.992-22.496l136-136q8.992-8.992 22.016-8.992t23.008 8.992zM376 648q10.016 10.016 10.016 22.496t-10.016 22.496l-136 136q-8.992 8.992-22.016 8.992t-22.496-9.504-9.504-22.496 8.992-22.016l136-136q10.016-10.016 22.496-10.016t22.496 10.016z"
                        ></path>
                    </symbol>
                </svg>
                <use href="#cp-icon-loading"></use>
            </svg>

            <slot></slot>
        `;

        this._shadowRoot = this.attachShadow({
            mode: "open"
        });
        this._shadowRoot.appendChild(template.content.cloneNode(true));

        this.$svg = this._shadowRoot.querySelector("svg");
    }

    static get observedAttributes() {
        return ["size", "color"];
    }

    get size() {
        return this.getAttribute("size") || "";
    }

    set size(value) {
        this.setAttribute("size", value);
    }

    get color() {
        return this.getAttribute("color") || "";
    }

    set color(value) {
        this.setAttribute("color", value);
    }

    connectedCallback() {}

    attributeChangedCallback(name, oldValue, newValue) {
        this.render(name);
    }

    render(name) {
        if (name === "size") {
            this.$svg.style.fontSize = `${this.size}px`;
        } else if (name === "color") {
            this.$svg.style.color = this.color;
        }
    }
}

if (!customElements.get("cp-loading")) {
    customElements.define("cp-loading", Loading);
}
